<template>
    <div class="platform-role">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="名称">
                <el-input v-model="searchForm.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="编码">
                <el-input v-model="searchForm.code" placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="listRole">刷新</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                default-expand-all
                stripe
                size="mini">
            <el-table-column
                    prop="name"
                    label="名称"
                    sortable
                    width="*"
                    min-width="180">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="编码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="70">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                    <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    width="50">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtCreate"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtModified"
                    label="修改时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parentMethod="listRole"
                          :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
        <el-dialog :close-on-click-modal="false" title="角色管理" :visible.sync="dialogFormVisible" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form ref="form" :model="roleForm" label-width="80px">
                        <el-form-item label="角色编码">
                            <el-input v-model="roleForm.code"></el-input>
                        </el-form-item>
                        <el-form-item label="角色名称">
                            <el-input v-model="roleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="roleForm.status" placeholder="请选择状态" style="width: 100%">
                                <el-option label="启用" :value="1"></el-option>
                                <el-option label="停用" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="roleForm.sort" type="number" min="0" max="90000"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSave">保存</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12" style="height: 400px; overflow: auto">
                    <el-tree
                            ref="menuTree"
                            :data="menuTree"
                            show-checkbox
                            default-expand-all
                            node-key="ukId"
                            :props="menuTreeProps">
                    </el-tree>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import DormitoryPagination from "../../components/DormitoryPagination";

    import {listRole, saveRole, createRole, updateRole, deleteRole, selectRole} from "../../../../api/platform/role";
    import {listMenuTree, listMenuByRoleId} from "../../../../api/platform/menu";

    import PageSizeUtils from "../../../../utils/PageSizeUtils";


    export default {
        name: "Role",
        components: {DormitoryPagination},
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                roleForm: {
                    code: "",
                    name: "",
                    menuIds: [],
                    status: 1,
                    sort: 10000
                },
                menuTree: [],
                menuTreeProps: {
                    children: 'children',
                    label: 'name'
                },
                searchForm: {},
                isUpdate: false
            };
        },
        methods: {
            listRole(current, size) {
                listRole(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.roles.records
                    PageSizeUtils.setPagination(response.data.roles)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                this.isUpdate = false
                listMenuTree(0).then(response => {
                    this.menuTree = response.data.menuTree
                }).catch(error => {
                    console.log(error)
                })
                this.roleForm = {}
                this.dialogFormVisible = true
            },
            handleEdit(index, row) {
                this.isUpdate = true
                listMenuTree(0).then(response => {
                    this.menuTree = response.data.menuTree
                    this.$nextTick(function () {
                        this.setMenuTreeCheck(this.roleForm.menuIds)
                    })
                }).catch(error => {
                    console.log(error)
                })
                this.roleForm = row
                this.dialogFormVisible = true
            },
            handleDelete(index, row) {
                console.log(row.ukId)
                deleteRole(row.ukId).then(response => {
                    this.listRole();
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listRole(this.$store.state.Navigation.pagination.current, this.$store.state.Navigation.pagination.size)
            },
            handleReset() {
                this.searchForm = {};
            },
            handleSave() {
                let checkedKeys = this.$refs.menuTree.getCheckedKeys();
                let halfCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys();
                this.roleForm.menuIds = checkedKeys.concat(halfCheckedKeys);
                if (this.isUpdate) {
                    updateRole(this.roleForm).then(response => {
                        this.listRole();
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    createRole(this.roleForm).then(response => {
                        this.listRole();
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            setMenuTreeCheck(menuIds) {
                for (let menuId of menuIds) {
                    let node = this.$refs.menuTree.getNode(menuId);
                    if (node.childNodes == 0) {
                        this.$refs.menuTree.setChecked(menuId, true)
                    }
                }
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            }
        },
        created() {
            this.listRole(this.$store.state.Navigation.pagination.current, this.$store.state.Navigation.pagination.size)
        }
    }
</script>

<style scoped>

</style>